<template>
	<view class="top">
		<view class="topimg">
			<image class="topimg_img1" :src="img1"  mode=""></image>
		</view>
		<view class="input1">
			<input class="input1_1" type="text" value="">
		</view>
	</view>
	<view class="mid_1">
		<view class="mid_1_1">
			<view><image class="mid_1_img2" :src="img2" mode=""></image></view>
			<view style="margin-left: 150rpx;font-size: 30px;"><text>x</text></view>
			<view><text style="font-size: 15px;margin-left: 10rpx;">今天</text></view>
		</view>
		<view class="mid_1_1">
			<view><image class="mid_1_img2" :src="img3" mode=""></image></view>
			<view style="margin-left: 150rpx;font-size: 30px;"><text>x</text></view>
			<view><text style="font-size: 15px;margin-left: 10rpx;">今天</text></view>
		</view>
		<view class="mid_1_1">
			<view><image class="mid_1_img2" :src="img4" mode=""></image></view>
			<view style="margin-left: 150rpx;font-size: 30px;"><text>x</text></view>
			<view><text style="font-size: 15px;margin-left: 10rpx;">今天</text></view>
		</view>
		<view class="mid_1_1">
			<view><image class="mid_1_img2" :src="img5" mode=""></image></view>
			<view style="margin-left: 150rpx;font-size: 30px;"><text>x</text></view>
			<view><text style="font-size: 15px;margin-left: 10rpx;">今天</text></view>
		</view>
		<view class="mid_1_1">
			<view><image class="mid_1_img2" :src="img6" mode=""></image></view>
			<view style="margin-left: 150rpx;font-size: 30px;"><text>x</text></view>
			<view><text style="font-size: 15px;margin-left: 10rpx;">今天</text></view>
		</view>
		<view class="mid_1_1">
			<view><image class="mid_1_img2" :src="img7" mode=""></image></view>
			<view style="margin-left: 150rpx;font-size: 30px;"><text>x</text></view>
			<view><text style="font-size: 15px;margin-left: 10rpx;">今天</text></view>
		</view>	
	</view>
	<view class="mid_2">
		<view>
		<text class="text_mylist">我的列表</text>
		</view>
		<view class="mid_2_list">
			<image class="mid_2_img8" :src=img8  mode="" style="margin-top: 10rpx;"></image>
			<text style="font-size: 20px;vertical-align: 08px;">提醒</text>
			<text style="margin-left: 450rpx;font-size: 20px;vertical-align: 08px;">X</text>
		</view>
		<view class="mid_2_list">
			<image class="mid_2_img8" :src=img8  mode="" style="margin-top: 10rpx;"></image>
			<text style="font-size: 20px;vertical-align: 08px;">提醒</text>
			<text style="margin-left: 450rpx;font-size: 20px;vertical-align: 08px;">X</text>
		</view>
		<view class="mid_2_list">
			<image class="mid_2_img8" :src=img8  mode="" style="margin-top: 10rpx;"></image>
			<text style="font-size: 20px;vertical-align: 08px;">提醒</text>
			<text style="margin-left: 450rpx;font-size: 20px;vertical-align: 08px;">X</text>
		</view>
		<view class="mid_2_list">
			<image class="mid_2_img8" :src=img8  mode="" style="margin-top: 10rpx;"></image>
			<text style="font-size: 20px;vertical-align: 08px;">提醒</text>
			<text style="margin-left: 450rpx;font-size: 20px;vertical-align: 08px;">X</text>
		</view>
	</view>
</template>

<script setup>
	let img1="../../static/1.png"
	let img2="../../static/today.png"
	let img3="../../static/plan.png"
	let img4="../../static/all.png"
	let img5="../../static/flag.png"
	let img6="../../static/right.png"
	let img7="../../static/fenpei.png"
	let img8="../../static/list1.png"
</script>

<style>
	.top{
		background-color: red;
		width: 750rpx;
		height: 150rpx;		
		/* display: flex;
		justify-content: flex-start;
		flex-wrap: wrap; */
	}
	.topimg{		
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
	/* 	background-color:white; */
	}
	.topimg_img1{
		height: 50rpx;
		width: 50rpx;
		
		/* display: flex;
		justify-content: flex-end; */
	}
	.input1{
		display: flex;
		justify-content: flex-start;
		margin-left: 25rpx;
	}
	.input1_1{		
		height: 60rpx;
		width: 700rpx;
		border-radius:60rpx;
		background-color: aqua;
	}
	.mid_1{
		height: 620rpx;
		width: 700rpx;
		background-color: aqua;
		margin-left: 25rpx;
		display: flex;
		flex-wrap: wrap;
		padding-left: 10rpx;
	}
	.mid_1_1{
		height: 150rpx;
		width: 310rpx;
		margin-left:15rpx ;
		margin-top: 30rpx;
		border: 1px black solid;
		display: flex;
		flex-wrap: wrap;
	}
	.mid_1_img2{
		margin-top: 10rpx;
		margin-left: 10rpx;
		height: 70rpx;
		width: 70rpx;
	}
	text{
		color: gray;
	}
	.mid_2{
			height: 680rpx;
			width: 700rpx;
			background-color:lightblue;
			margin-left: 25rpx;
			/* display: flex;
			flex-wrap: wrap; */		
	}
	.mid_2_list{
		margin-left: 20rpx;
	}
	.mid_2_img8{
		height: 70rpx;
		width: 70rpx;
	}
	.text_mylist{
		vertical-align: 15rpx;
		margin-left: 15rpx;
		color: wheat;
		font-size: 18px;
	}
</style>
